<template>
	<div class="roads-charts">
		<el-table stripe v-loading="tableLoad" element-loading-background="rgba(0, 0, 0, 0.6)" :data="tableData"
			height="100%">
			<el-table-column align="center" label="排名">
				<template #default="{ $index }">
					<span :class="{ 'index-color': $index < 3 }">{{ $index + 1 }}</span>
				</template>
			</el-table-column>
			<el-table-column prop="roadname" align="center" label="道路名称">
				<template #default="scope">
					<el-tooltip class="box-item" effect="dark" :content="scope.row.roadname"
						placement="top">{{ scope.row.roadname }}</el-tooltip>
				</template>
			</el-table-column>
			<el-table-column prop="nodeName" align="center" label="行政区划" />
			<el-table-column prop="congestIndex" align="center" label="拥堵指数"> </el-table-column>
		</el-table>
	</div>
</template>
<script>
	import {
		defineComponent,
		inject,
		reactive,
		toRefs
	} from 'vue';
	import {
		getCongestRank
	} from '@/api/home';
	import {
		getnum
	} from '@/utils/validate';
	import {
		getQueryRoadRank,
	} from '@/api/tomae';

	export default defineComponent({
		setup() {
			const echarts = inject('echarts');
			const state = reactive({
				charts: null,
				tableLoad: true,
				tableData: [],
				getnum: getnum,
			});
			const setData = (mapCode) => {
				state.tableLoad = true;
				getQueryRoadRank({
					endDate: "",
					roadName: "",
					roadType: '2,3,4,5,6',
					startDate: "",
					type: 1,
				}).then((res) => {
					state.tableLoad = false;
					console.log(res, 'jsdfo ');
					state.tableData = res.slice(0, 10);
				});
			};
			return {
				...toRefs(state),
				setData,
			};
		},
	});
</script>
<style lang="less" scoped>
	.roads-charts {
		height: 48.5vh;
		margin-top: -8px;
		background: url('@/assets/images/home/case-3.png') no-repeat;
		background-size: 100% 100%;
		padding: 40px 20px 20px;
	}

	.index-color {
		color: #f9d614;
	}

	:deep(.el-table__header) {

		// background: #1961bb !important;
		.cell {
			background-color: #1496fa;
			border: 2px solid #2ddcff;
			margin: 5px;
			border-radius: 5px;
			border-bottom: 2px solid #2ddcff !important;
			font-size: 0.8vw;
			color: #fff;
			font-weight: 600;
		}
	}

	:deep(.el-table .cell) {
		font-size: 0.7vw;
		color: #fff;
		font-weight: 600;
	}

	:deep(.el-table__body) {
		.cell {
			white-space: nowrap;
		}

		& tr:nth-child(even) {
			.cell {
				background-color: rgba(255, 255, 255, 0.2);
				margin: 5px;
				border-radius: 5px;
			}
		}

		tr {
			& td:first-child {
				.cell {
					font-size: 0.8vw;
				}
			}
		}

		& tr:nth-child(1) {
			& td:first-child {
				.index-color {
					color: #ba6db1;
					font-weight: bold;
				}
			}
		}

		& tr:nth-child(3) {
			& td:first-child {
				.index-color {
					color: #26bdff;
					font-weight: bold;
				}
			}
		}
	}
</style>
<style>
	.el-table__inner-wrapper::before {
		display: none;
	}
</style>